import { useEffect, useRef } from "react";
import * as echarts from "echarts";

interface LineChartProps {
  data: Array<{
    time: string;
    value: number;
    type: string;
  }>;
  height?: number;
  colors?: string[];
  axisLabelInfo?: Object;
  xAxisLineColor?: string;
  yAxisLineColor?: string;
  showLegend?: boolean;
  legendTextColor?: string;
  legendItemGap?: number;
  legendBottomGap?: number;
  splitLineInfo?: Object;
}

const ELineChart = (props: LineChartProps) => {
  const chartRef = useRef<HTMLDivElement>(null);
  const { 
    data, 
    height = 240, 
    // 设置默认颜色
    colors = ['#37A2FF', '#67E0E3', '#FFDB5C', '#FF9F7F', '#E062AE', '#37A2DA'], 
    axisLabelInfo,
    // 设置默认颜色为浅灰色
    xAxisLineColor = '#333',
    yAxisLineColor = '#333',
    // 默认显示图例
    showLegend = true,
    legendTextColor,
    legendItemGap = 10,
    legendBottomGap = 0,
    splitLineInfo = {
      lineStyle: {
        type: 'dashed', // 将分隔线设置为虚线
        color: '#333'   // 可以设置虚线颜色
      }
    },
  } = props;

  useEffect(() => {
    if (!data.length || !chartRef.current) return;

    const chart = echarts.init(chartRef.current);

    const types = Array.from(new Set(data.map((item) => item.type)));
    const xAxisData = Array.from(new Set(data.map((item) => item.time)));
    const axisLabel = axisLabelInfo || {
      rotate: 0,  // 添加15度的倾斜角度
      interval: 0, // 强制显示所有标签
      margin: 10, // 增加标签与轴线的距离
      hideOverlap: true, // 防止标签重叠隐藏
      overflow: 'break' // 文字过长时换行显示
    };

    const series = types.map((type, index) => ({
      name: type,
      type: "line",
      smooth: true,
      data: xAxisData.map((time) => {
        const point = data.find(
          (item) => item.time === time && item.type === type
        );
        return point ? point.value : null;
      }),
      symbol: "circle",
      symbolSize: 6,
      itemStyle: { 
        color: colors[index % colors.length] 
      }
    }));

    const option = {
      grid: {
        top: 10,
        right: 20,
        bottom: showLegend ? 20 : 0, // 根据是否显示图例调整底部间距
        left: 20,
        containLabel: true,
      },
      legend: {
        show: showLegend,
        bottom: legendBottomGap,
        left: "center",
        itemGap: legendItemGap,
        textStyle: {
          color: legendTextColor
        }
      },
      tooltip: {
        trigger: "axis",
      },
      xAxis: {
        type: "category",
        data: xAxisData,
        axisLabel: axisLabel,
        axisLine: {
          lineStyle: {
            color: xAxisLineColor
          }
        }
      },
      yAxis: {
        type: "value",
        splitNumber: 2,
        axisLine: {
          lineStyle: {
            color: yAxisLineColor
          }
        },
        splitLine: splitLineInfo
      },
      series,
    };

    chart.setOption(option);

    // 响应式处理
    const handleResize = () => {
      chart.resize();
    };
    window.addEventListener("resize", handleResize);

    return () => {
      chart.dispose();
      window.removeEventListener("resize", handleResize);
    };
  }, [data, xAxisLineColor, yAxisLineColor, showLegend, legendTextColor, legendItemGap]);

  return (
    <div
      ref={chartRef}
      style={{ width: "100%", height: height || "100%", paddingTop: 12 }}
    />
  );
};

export default ELineChart;
